<template>
    <div class="gold-shop-wrap">
        <van-nav-bar :title="type == 1 ? '消费补贴' : '商城消费补贴'" left-arrow fixed @click-left="onClickLeft">
        </van-nav-bar>
        <!-- <van-tabs v-model="active">
            <van-tab title="排队中"></van-tab>
            <van-tab title="已完成"></van-tab>
        </van-tabs> -->
        <div class="subsidy_title">
            <div class="subsidy_title_box">
                <div class="subsidy_title_list" v-for="item, index in titleList" :key="index"
                    :class="{ 'active': current === index }" @click="setCurrent(index)">{{ item.name }}</div>
            </div>

            <div class="tab_nav" :style="tabStyle" @click="onClickRight">
                <img v-if="desc" src="../../../images/dao.png" alt="">
                <img v-else src="../../../images/zheng.png" alt="">
                倒序
            </div>
        </div>
        <div class="subsidy_text" v-html="tips"></div>
        <!-- <div class="subsidy_text" v-if="current == 1">已有4000.00元完成了排队返利{{ tips }}</div> -->
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="order_all" v-for="item, index in subsidyList" :key="index" :title="item">
                <div class="order_name_return">
                    <!-- <div class="order_name_left">{{ item.shop_name }}</div> -->
                    <!-- <div class="order_name_right">等待付款</div> -->
                </div>
                <div class="subsidy_lists">
                    <!-- <img src="../../assets/qr.jpg" alt=""> -->
                    <div class="order_goods">
                        <div class="order_goods_name">{{ item.shop_name }}</div>
                        <div class="order_goods_sku">订单编号：{{ item.order_no }}</div>
                        <div class="order_goods_sku">下单时间：{{ item.payment_time }}</div>
                        <div class="order_goods_sku">实付金额：{{ item.payment }}</div>
                        <div class="order_goods_sku">应补金额：{{ item.subsidy }}</div>
                        <div class="order_goods_sku">已补金额：{{ item.received }}</div>
                        <div class="order_goods_sku" v-if="current == 1 && item.integral > 0" style="color: #F9301B;">
                            转换积分：{{
                                item.integral }}</div>
                        <div class="order_goods_sku" v-if="current == 1">完成时间：{{ item.complete_time }}</div>
                        <div class="order_progress" v-if="current == 0">
                            <!--  -->
                            <van-progress stroke-width="6" color="#1D69E4" track-color="#F2F4F5"
                                :percentage="Math.min((item.received / item.subsidy) * 100, 100)" />
                            <div class="progress_text">补贴进度: {{ Math.min((item.received / item.subsidy) * 100,
                                100).toString().split('.')[0] + '.' + (Math.min((item.received / item.subsidy) * 100,
                                    100).toString().split('.')[1] || '00').slice(0, 2) }}% </div>
                        </div>
                    </div>
                    <!--  v-if="item.rank > 0" -->
                    <div class="subsidy_tips" v-if="current == 1">{{ item.status == 1 ? '完成消费补贴' : '手动结束补贴' }}</div>
                    <div class="subsidy_end" v-if="current == 0 && item.received <= 0" @click="handleEnd(item.id)">结束补贴
                    </div>
                    <div class="subsidy_level" v-if="item.rank != ''">{{ item.rank }}</div>
                </div>
                <!-- <div class="order_total">共计10件商品 总计：800</div> -->
                <!-- <div class="order_pay">
                    <div class="order_pay_money"></div>
                    <div class="">
                        <van-button class="order_pay_btn" type="primary" size="small">删除记录</van-button>
                        <van-button class="order_pay_btn" type="primary" size="small" @click="ordeInfo">查看详情</van-button>
                    </div>
                </div> -->
            </div>
        </van-list>
        <van-popup v-model="showEnd" :style="{ width: '70%' }" round>
            <div class="popup_title">
                <div class="msg-title">
                    <div
                        style="text-align: center;font-size: 0.28rem;font-weight: 500; margin-bottom: 0.2rem;color: #333;margin-top: -0.3rem;">
                        温馨提示</div>
                    <p> 确认结束补贴后，该订单将会自动结束消费补贴的流程，剩余未补贴的余额，将会转换为积分，该积分只可在商城购买商品使用，不可提现！
                    </p>
                </div>
            </div>
            <div class="popup_btn_list">
                <van-button class="popup_btn" size="small" round @click="showEnd = false">取消</van-button>
                <van-button class="popup_btn" type="primary" size="small"
                    color="linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%)" round
                    @click="orderSubmit">结束补贴</van-button>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { Dialog } from 'vant';
import { SUBSIDY_LIST, SUBSIDY_END } from '@/api/mine'
export default {
    data() {
        return {
            loading: false,
            finished: false,
            showEnd: false,
            active: 0,
            current: 0,
            titleList: [
                {
                    id: 0,
                    name: '补贴中'
                },
                {
                    id: 1,
                    name: '已完成'
                }
            ],
            subsidyList: [],
            page: 1,
            pageSize: 20,
            tips: "",
            ids: '',
            type: this.$route.query.id,
            desc: true
        }
    },
    created() {
        // this.active=this.$route.query.id
        window.scrollTo(0, 0)
        document.title = this.$route.query.id == 1 ? '消费补贴' : '商城消费补贴'
    },
    computed: {
        tabStyle() {
            return {
                color: !this.desc ? '#1D69E4' : '#999', // 修正颜色代码
            };
        },
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        onClickRight() {
            this.desc = !this.desc
            this.resetInit()
        },
        // 点击切换tab
        setCurrent(index) {
            this.desc = '从高到低'
            this.current = index;
            // 数据请求
            this.resetInit();
        },
        resetInit() {
            this.page = 1;
            this.subsidyList = [];
            this.finished = false;
            this.loading = true;
            this.onLoad()
        },
        onLoad() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            params['status'] = this.current;
            params['type'] = this.type == 1 ? 20 : 10;
            params['sort_rule']=this.desc?0:1
            this.$http.get(SUBSIDY_LIST, { params: params })
                .then(res => {
                    const {
                        list
                    } = res.data;
                    this.tips = res.data.tip
                    if (list && list.length) {
                        this.page++;
                        this.subsidyList = this.subsidyList.concat(list);
                        // 加载状态结束
                        this.loading = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        },
        handleEnd(id) {
            this.showEnd = true
            this.ids = id
        },
        //结束补贴
        orderSubmit() {
            this.$http.post(SUBSIDY_END + this.ids).then(res => {
                // this.$toast("补贴结束")
                this.resetInit();
                this.showEnd = false
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
    background: #f5f5f5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

::v-deep .van-progress__pivot {
    display: none !important;
}

.subsidy_title {
    // width: 95%;
    margin: 0 auto;
    // margin-top: 0.3rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.28rem;
    padding: .24rem .24rem 0 .24rem;
    box-sizing: border-box;
    background-color: #fff;

    .subsidy_title_list {
        margin-right: 0.4rem;
        // font-size: 0.28rem;
        position: relative;
        color: #666666;
        padding-bottom: 0.24rem;

    }

    .tab_nav {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: .28rem;
        color: #999999;

        img {
            width: .36rem;
            height: .36rem;
        }
    }

    .subsidy_title_box {
        display: flex;
    }

    .subsidy_title_list.active {
        color: #1D69E4;
        font-weight: 500;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px; // 横杠的高度，可以根据需要调整
            background-color: #1D69E4; // 红色横杠
        }

        /* 选中时黑色 */
    }


}

.subsidy_text {
    width: 95%;
    margin: 0 auto;
    margin-top: 0.2rem;
    font-size: 0.25rem;
    color: #999;
}

.order_progress {
    margin-top: .2rem;

    .progress_text {
        font-size: .24rem;
        color: #666;
        margin-top: .16rem;
    }
}

.order_all {
    width: 95%;
    margin: 0 auto;
    margin-top: 0.2rem;
    // border: 0.01rem solid #999;
    border-radius: 0.16rem;
    background: #fff;

    .order_name_return {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        // padding: 0.32rem;
        padding-bottom: 0;
        // border-bottom: 0.01rem solid #999;
        box-sizing: border-box;

        .order_name_left {
            font-weight: bold;
        }

        // &_right {
        //     font-size: 0.25rem;
        // }
    }

    .subsidy_lists {
        padding: 0.32rem;
        padding-top: 0.2rem;
        display: flex;
        justify-content: space-between;
        position: relative;
        // img {
        //     width: 1.8rem;
        // }

        .order_goods {
            width: 70%;
            font-size: 0.24rem;
            line-height: 0.42rem;
            font-family: PingFangSC, PingFang SC;

            &_name {
                font-size: 0.3rem;
                margin-bottom: .2rem;
            }

            &_sku {
                color: #666666;
            }

            &_price {
                font-size: 0.3rem;
                // font-weight: bold;
                // display: flex;
                // justify-content: space-between;

                span:last-child {
                    font-weight: 500;
                    font-size: 0.25rem;
                    color: #999;
                }
            }
        }

        .subsidy_tips {
            position: absolute;
            top: 0.2rem;
            right: 0.32rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #1D69E4;
            // line-height: 20px;
            text-align: left;
            font-style: normal;
        }

        .subsidy_end {
            position: absolute;
            top: 0.2rem;
            right: 0.32rem;
            width: 1.36rem;
            height: .48rem;
            background: rgba(29, 105, 228, 0.1);
            border-radius: .24rem;
            border: 1px solid #1D69E4;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .24rem;
            color: #1D69E4;
            line-height: .48rem;
            text-align: center;
            font-style: normal;
            // height: .6rem;
            // border-radius: 15px;
            // border: 0.02rem solid #F32A23;
            // font-family: PingFangSC, PingFang SC;
            // font-weight: 600;
            // font-size: 0.28rem;
            // color: #F32A23;
            // line-height: .6rem;
            // text-align: center;
            // font-style: normal;
            // padding: 0 .4rem;
            // margin-top: 0.5rem;

        }

        .subsidy_level {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 1.4rem;
            height: .56rem;
            background: #FFEFC4;
            border-radius: 8px 0px 8px 0px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .24rem;
            color: #FF6200;
            line-height: .56rem;
            text-align: center;
            font-style: normal;
            // height: .6rem;
            // border-radius: 15px;
            // border: 0.02rem solid #F32A23;
            // font-family: PingFangSC, PingFang SC;
            // font-weight: 600;
            // font-size: 0.28rem;
            // color: #F32A23;
            // line-height: .6rem;
            // text-align: center;
            // font-style: normal;
            // padding: 0 .4rem;
            // margin-top: 0.5rem;
        }
    }

    // .order_total {
    //     margin-left: 2.3rem;
    //     font-size: 0.25rem;
    //     margin-bottom: 0.2rem;
    // }

    // .order_pay {
    //     border-top: 0.01rem solid #999;
    //     display: flex;
    //     justify-content: space-between;
    //     padding: 0.2rem;

    //     .order_pay_money {
    //         font-size: 0.25rem;
    //         margin-top: 0.2rem;
    //     }

    //     .order_pay_btn {
    //         margin-left: 0.2rem;
    //     }
    // }
}

.popup_title {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
    padding: 0.72rem 0;
}

.msg-title {
    padding: 0 .32rem;

    p {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .28rem;
        color: #666666;
        line-height: .4rem;
        text-indent: .4rem;
        text-align: justify;
        font-style: normal;
    }
}

.popup_btn_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: .4rem;
    display: flex;
    justify-content: space-between;

    .popup_btn {
        width: 45%;
        height: .8rem;
        font-size: .32rem;
    }

}
</style>
